<script setup lang="ts">
import {queryArticleInfo} from '@/api/article/index'
import 'md-editor-v3/lib/style.css';
import {MdPreview} from "md-editor-v3";
const articleId = ref<string>(useRoute().params.id as string)
const detailInfo = ref<any>({})
const baseUrl = 'http://localhost:9002/qcy-blog'
const { data,refresh } = await queryArticleInfo(articleId.value)
if(!data.value){
  refresh();
}
//@ts-ignore
detailInfo.value = data.value.result


useHead({
  //@ts-ignore
  title:"逸辰时光-"+ detailInfo.value.title,
  meta:[
    //@ts-ignore
    {name:'keywords',content:detailInfo.value.keywords},
    //@ts-ignore
    {name:'description',content:detailInfo.value.summary},
  ],
})
</script>

<template>
  <div class="article-detail flex between">
    <div class="blog-detail">
      <div class="header">
        <div class="title">
          {{detailInfo.title}}
        </div>
      </div>
      <div>
        <MdPreview v-model="detailInfo.contentMd"></MdPreview>
      </div>
    </div>
    <div class="cardGroup" v-if="!$device.isMobile">
      <AuthorInfo/>
    </div>
  </div>
</template>

<style scoped lang="scss">
.article-detail{
  width: 75%;
  margin: 20px auto;
  position: relative;
  .blog-detail{
    width: 70%;
    border-radius: 5px;
    min-height: 100vh;
    background-color: #fff;
    box-shadow: 0px 0px 12px rgba(0,0,0,.12);
    padding: 10px 20px;
    .header{
      .title{
        font-size: 28px;
        font-weight: bold;
        text-align: center;
      }
    }
  }
  .cardGroup{
    width: 299px;
    position: fixed;
    right: 12%;
    box-shadow: 0px 0px 12px rgba(0,0,0,.12);
  }
}
@media screen and (max-width: 1118px){
  .article-detail{
    width: 90%;
    margin: 20px auto;
    position: relative;
    .blog-detail{
      width: 100%;
      border-radius: 5px;
      min-height: 100vh;
      background-color: #fff;
      box-shadow: 0px 0px 12px rgba(0,0,0,.12);
      padding: 10px 20px;
      .header{
        .title{
          font-size: 28px;
          font-weight: bold;
          text-align: center;
        }
      }
    }
    .cardGroup{
      width: 299px;
      position: fixed;
      right: 12%;
      box-shadow: 0px 0px 12px rgba(0,0,0,.12);
    }
  }
}
</style>
